{% extends "base.html" %}

{% block title %}- параметры поиска{% endblock %}

{% block content %}
    <form method="post" action="/" enctype="multipart/form-data">
        {{ form.csrf_token }}
        <p class="h4">Уточните параметры поиска</p>

        <div class="d-flex flex-column mb-3" style="height: 100px;">
            <label for="text" class="form-label">Название вакансии</label>
            <input type="text" class="form-control" id="text" name="text" value="{{ form.text.data }}">
        </div>

        <div class="d-flex flex-column mb-3" style="height: 100px;">
            <label for="negative_text" class="form-label">Исключения</label>
            <input type="text"
                   class="form-control"
                   id="negative_text"
                   name="negative_text"
                   value="{{ form.negative_text.data }}">
        </div>


        <div class="d-flex justify-content-between column-gap-3" style="height: 100px;">
            <div class="flex-fill">
                <select class="form-select" aria-label="Опыт работы" name="experience">
                    {% for value, label in form.experience.choices %}
                        <option value="{{ value }}">{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
{#            <div class="flex-fill">#}
{#                <select class="form-select" aria-label="Тип занятости" name="employment">#}
{#                    <option value={{ form.employment }}>тип занятости</option>#}
{#                </select>#}
{#            </div>#}
            <div class="flex-fill">
                <select class="form-select" aria-label="График работы" name="schedule">
                    {% for value, label in form.schedule.choices %}
                        <option value="{{ value }}">{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>

        <div class="d-flex flex-column mb-3" style="height: 100px;">
            <label for="skills" class="form-label">Основные навыки</label>
            <input type="text"
                   class="form-control"
                   id="skills"
                   name="skills"
                   value="{{ form.skills.data }}">
        </div>

        <div class="d-flex flex-column mb-3">
            <button type="submit"
                    class="btn btn-outline-secondary"
                    id="searchBtn"
                    style="display: block"
                    onclick="showSpinner()">
            [ Найти ]
            </button>
        </div>

        <div class="d-flex justify-content-center">
            <div class="spinner-border text-secondary"
                 role="status"
                 style="display: none"
                 id="spinner">
            </div>
        </div>

    </form>

    <script>
      function showSpinner() {
        document.getElementById("spinner").style.display = "block";
        document.getElementById("searchBtn").style.display = "none";
        window.location.href = "/cover_letters";
      }
    </script>

{% endblock %}